<template>
<div style="margin: 10px 10px;">
    <el-card style="height: 640px; display: inline-block; width: 100%;">
      <!-- 菜单栏 -->
      <div class="top-tool-bar">
        <div style="float: left;">
          <el-input
            style="width: 200px; margin-right: 20px;"
            type="text"
            clearable
            placeholder="输入角色详情关键字"
            v-model="keyWord">
          </el-input>
          <el-button icon="el-icon-search" type="primary" @click="selectRoles()">搜索</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="data-table">
        <el-table
          height="500"
          stripe
          highlight-current-row
          v-loading="table.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="roleList">
          <el-table-column label="id" prop="id" min-width="100"></el-table-column>
          <el-table-column label="角色代码" prop="name" min-width="100"></el-table-column>
          <el-table-column label="角色详情" prop="detail" min-width="100"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="bottom-page">
        <el-pagination
          :disabled="false"
          background
          @size-change="val => this.pagination.pageSize = val"
          @current-change="val => this.pagination.currentPage = val"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as role from '@/api/role'

export default {
  name: 'RoleInfo',
  data () {
    return {
      roleList: [],
      keyWord: '',
      table: {
        loading: false
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20]
      }
    }
  },
  created () {
    this.selectRoles()
  },
  watch: {
    pagination: {
      handler: function () {
        this.selectRoles()
      },
      deep: true
    }
  },
  methods: {
    selectRoles () {
      let params = {
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize
      }
      if (this.keyWord.trim().length !== 0) {
        params.keyWord = this.keyWord
      }
      this.table.loading = true
      role.selectByPage(params).then(resp => {
        this.roleList = resp.data.data
        this.pagination.total = resp.data.total
        this.table.loading = false
      }).catch(_ => {
        this.$notify.error({title: '警告', message: '角色信息获取失败'})
        this.table.loading = false
      })
    }
  }
}
</script>

<style scoped>
  .top-tool-bar {
    height: 56px;
  }
  .data-table {
    border: 1px gainsboro solid;
  }
  .bottom-page {
    height: 100%;
    margin: 10px auto;
  }
</style>
